<template>
  <div class="q-pa-md q-gutter-xs">
    <div class="q-gutter-md row justify-center">
      <div>
        <t-spinner-audio color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerAudio</t-tooltip>
      </div>
      <div>
        <t-spinner-ball color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerBall</t-tooltip>
      </div>
      <div>
        <t-spinner-bars color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerBars</t-tooltip>
      </div>
      <div>
        <t-spinner-box color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerBox</t-tooltip>
      </div>
      <div>
        <t-spinner-clock color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerClock</t-tooltip>
      </div>
      <div>
        <t-spinner-comment color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerComment</t-tooltip>
      </div>
      <div>
        <t-spinner-cube color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerCube</t-tooltip>
      </div>
      <div>
        <t-spinner-dots color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerDots</t-tooltip>
      </div>
      <div>
        <t-spinner-facebook color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerFacebook</t-tooltip>
      </div>
      <div>
        <t-spinner-gears color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerGears</t-tooltip>
      </div>
      <div>
        <t-spinner-grid color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerGrid</t-tooltip>
      </div>
      <div>
        <t-spinner-hearts color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerHearts</t-tooltip>
      </div>
      <div>
        <t-spinner-hourglass color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerHourglass</t-tooltip>
      </div>
      <div>
        <t-spinner-infinity color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerInfinity</t-tooltip>
      </div>
      <div>
        <t-spinner-ios color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerIos</t-tooltip>
      </div>
      <div>
        <t-spinner-orbit color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerOrbit</t-tooltip>
      </div>
      <div>
        <t-spinner-oval color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerOval</t-tooltip>
      </div>
      <div>
        <t-spinner-pie color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerPie</t-tooltip>
      </div>
      <div>
        <t-spinner-puff color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerPuff</t-tooltip>
      </div>
      <div>
        <t-spinner-radio color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerRadio</t-tooltip>
      </div>
      <div>
        <t-spinner-rings color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerRings</t-tooltip>
      </div>
      <div>
        <t-spinner-tail color="primary" size="2em" />
        <t-tooltip :offset="[0, 8]">QSpinnerTail</t-tooltip>
      </div>
    </div>
  </div>
</template>
